<template>
	<div class="container" id="risk">
		<div class="container-box">
			<div class="top-box">
				<h2 class="box-title-ico">
					<span class="box-title-span">风险信息</span>
				</h2>
			</div>
			<div class="content-box">
				<ul class="nav nav-tabs" id="risk-tab" role="tablist">
					<template v-for="(item,$index) in riskdata">
						<li class="nav-item"  v-if="item.content!='' ">
							<a class="nav-link" :class="$index==0?'active show':'' " :id="tab+item.slug" data-toggle="tab" :href="id+id_name+item.slug" role="tab" aria-controls="home" aria-selected="true">{{item.title}}</a>
						</li>
					</template>
				</ul>
				<div class="tab-content" id="myRiskTabContent">
					<template v-for="(item,$index) in riskdata">
						<div v-if="item.content!=''" class="tab-pane fade in show" :class="$index==0?'active in':'' " :id="id_name+item.slug" role="tabpanel" :aria-labelledby="item.document_id+tab">
							<div style="padding:30px 0;" v-html="item.content"> </div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				tab: "-tab-risk",
				id: "#",
				id_name:'id_'

			}
		},
		props:['riskdata']
	}
</script>
<style scoped="scoped">
	#myRiskTabContent{
		min-height: 200px;
	}
</style>